<template>
  <div>
    <el-dialog
      title="请选择本次登录的账户"
      :visible.sync="dialogVisible"
      append-to-body
      width="900px"
      :close-on-click-modal="false"
      @close="close"
    >
      <!-- 绑定的列表 -->
      <div v-loading="loading" class="list">
        <el-row :gutter="20">
          <el-col v-for="(item,index) in data" :key="index" :span="12">
            <el-card shadow="hover">
              <!--  列表信息-->
              <div class="list-info clearfix">
                <div class="img-container fl">
                  <img v-if="item.logoUrl" :src="item.logoUrl">
                </div>
                <div class="name-container">
                  <div>
                    <strong>商户：{{ item.businessName }}</strong>
                  </div>
                  <div class="app-line-one">门店：{{ item.shopName||'总部' }}</div>
                  <div class="app-line-one">用户：{{ item.accountName }}</div>
                </div>
              </div>
              <el-button type="primary" @click="login(item)">进入</el-button>
            </el-card>
          </el-col>
        </el-row>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { setToken } from '@/utils/auth'
import { wxLogin } from '@/api/login'
export default {
  props: {
    codeNo: {
      require: true,
      type: String
    },
    scope: {
      require: true,
      type: String
    }
  },
  data() {
    return {
      // 配置
      resolve: null,
      reject: null,
      dialogVisible: null,
      // 状态
      loading: false,
      // 数据
      data: ''
    }
  },
  methods: {
    // 登录
    login(item) {
      const params = {}
      params.userId = item.userId
      params.codeNo = this.codeNo
      params.scope = this.scope
      this.loading = true
      wxLogin(params)
        .then(res => {
          // 保存token
          setToken(res.data)
          this.$store.state.user.token = res.data
          // 跳转
          this.$router.push({
            path: '/'
          })
        })
        .catch(() => {
          this.loading = false
        })
    },
    open(data) {
      this.data = data
      this.show()
      return new Promise((resolve, reject) => {
        this.resolve = resolve
        this.reject = reject
      })
    },

    show() {
      this.dialogVisible = true
    },

    close() {
      this.loading = false
      this.resolve && this.resolve()
    },

    hide() {
      this.resolve = null
      this.reject = null
      this.dialogVisible = false
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
  .list {
    height: 400px;
    overflow-y: auto;
    overflow-x: hidden;
    /* 重置 */
    .el-col {
      margin-bottom: 20px;
    }
    .el-button {
      width: 100%;
    }
    /* 信息 */
    &-info {
      height: 70px;
      margin-bottom: 30px;
      .img-container {
        width: 70px;
        height: 70px;
        margin-right: 10px;
        img {
          border-radius: 50%;
        }
      }
      .name-container {
        height: 100%;
        div:not(:last-child) {
          margin-bottom: 5px;
        }
        div:first-child {
          margin-bottom: 5px;
          font-size: 20px;
        }
      }
    }
  }
</style>
